<template>
  <div class="app-container">
    <el-form :inline="true" class="form-inline">
      <el-form-item label="用户昵称">
        <el-input v-model="searchInfo.nickname" placeholder="请输入关键字" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="searchInfo.mobile" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="shared">分享次数 > 0</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="content">
      <div class="_list">
        <el-table :data="dataList" highlight-current-row v-loading.body="listLoading" :height="$tools.tableHeight()" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="用户id" prop="id"></el-table-column>
          <el-table-column label="用户信息" width="160">
            <template slot-scope="scope">
              <div class="user_info">
                <img :src="scope.row.avatar && scope.row.avatar.indexOf('http') > -1 ? scope.row.avatar : '/static/images/avatar_user.png'" class="thumbnail" />
                <div class="info">{{ scope.row.username }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户账号" prop="mobile" width="120"></el-table-column>
          <el-table-column label="系统类型" align="center" prop="sysType"> </el-table-column>
          <el-table-column label="注册来源" align="center">
            <template slot-scope="scope">
              {{ scope.row.registerChannel === 1 ? '官网' : 'APP' }}
            </template>
          </el-table-column>
          <el-table-column label="分享次数" align="center" prop="shareNum"> </el-table-column>
          <el-table-column label="注册拉新" align="center">
            <template slot-scope="scope">{{ scope.row.shareTotalNum }}</template>
          </el-table-column>
          <el-table-column label="VIP拉新" align="center">
            <template slot-scope="scope">{{ scope.row.shareVIPTotalNum }}</template>
          </el-table-column>
          <el-table-column label="总分佣金额" align="center">
            <template slot-scope="scope">￥{{ scope.row.commission / 100 }}</template>
          </el-table-column>
          <el-table-column label="已提现金额" align="center">
            <template slot-scope="scope">￥{{ scope.row.withdrawrCommissioned / 100 }}</template>
          </el-table-column>
          <el-table-column label="待提现金额" align="center">
            <template slot-scope="scope">￥{{ scope.row.unwWithdrawrCommission / 100 }}</template>
          </el-table-column>
          <el-table-column label="提现次数" align="center" prop="withdrawrNum"></el-table-column>
          <el-table-column label="操作" width="140" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="getInviteList(scope.row.invitationCode)">分享统计</el-button>
              <!-- <el-button type="text" @click="arrDelete('2', scope.row.id)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <div class="left">
          <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
            <el-button size="small" type="danger" @click="arrDelete('2')">批量删除</el-button>
          </el-tooltip>
        </div>
        <div class="right" v-if="total > 0">
          <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <el-dialog title="查看分享用户" width="1000px" :visible.sync="showDialog">
        <div class="_list">
          <el-table highlight-current-row :data="inviteList" height="450" style="width: 100%;" v-loading="inviteLoading">
            <el-table-column label="用户信息" width="200">
              <template slot-scope="scope">
                <div class="user_info">
                  <div class="thumbnail" v-if="scope.row.avatar">
                    <img :src="scope.row.avatar" />
                  </div>
                  <div class="info">
                    <div class="_name">{{ scope.row.userName }}</div>
                    <div>{{ scope.row.mobile }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="系统类型" align="center">
              <template slot-scope="scope">
                {{ scope.row.sysType }}
              </template>
            </el-table-column>
            <el-table-column label="用户等级" align="center">
              <template slot-scope="scope">{{ scope.row.memberType === 'ONE' ? '1年' : scope.row.memberType === 'HALF' ? '半年' : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="注册来源" align="center">
              <template slot-scope="scope">
                {{ scope.row.registerChannel === 1 ? 'APP' : '分享' }}
              </template>
            </el-table-column>
            <el-table-column label="注册时间" align="center" width="180">
              <template slot-scope="scope">{{ scope.row.createTime | formatDate }}</template>
            </el-table-column>
            <el-table-column label="付费时间" align="center" width="180">
              <template slot-scope="scope">{{ scope.row.payTime | formatDate }}</template>
            </el-table-column>
            <el-table-column label="付费金额" align="center" prop="amount">
              <template slot-scope="scope">￥{{ scope.row.amount ? scope.row.amount / 100 : '-' }}</template>
            </el-table-column>
            <el-table-column label="付费渠道" align="center">
              <template slot-scope="scope">{{ scope.row.payType === 'WX_PAY' ? '微信' : scope.row.payType === 'ALI_PAY' ? '支付宝' : scope.row.payType === 'APPLE_PAY' ? '苹果支付' : '-' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="text-align:right; margin-top: 20px;" v-if="inviteTotal">
          <el-pagination background :page-size="limit" :total="inviteTotal" :current-page.sync="currentPage" @current-change="currentPageChange" layout="total, prev, pager, next, jumper">
          </el-pagination>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="isShow = true">添加</el-button>
      </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mixinsTable from '@/util/mixins.table';
export default {
  name: 'userList',
  mixins: [mixinsTable],
  data () {
    return {
      shared: false,
      searchInfo: {},
      inviteList: [],
      showDialog: false,
      inviteLoading: true,
      searchField: 'searchInfo',
      APISERVER: 'getShareList',
      DELETEAPI: 'deleteUser',
      invitationCode: '',
      inviteTotal: 0,
      currentPage: 1
    };
  },
  created () {
    this.getList();
  },
  methods: {
    getInviteList (invitationCode) {
      this.invitationCode = invitationCode;
      this.showDialog = true;
      this.inviteLoading = true;
      this.inviteList = [];
      this.$API
        .getInviteList({
          invitationCode: this.invitationCode,
          page: this.currentPage,
          size: this.limit
        })
        .then(res => {
          var data = res.data;
          if (res.code === 200 && data && data.items.length > 0) {
            this.inviteList = data.items;
            this.inviteTotal = data.totalSize;
          }
          this.inviteLoading = false;
        })
        .catch(() => {
          this.inviteList = [];
          this.inviteLoading = false;
          this.inviteTotal = 0;
          this.currentPage = 1;
        });
    },
    currentPageChange (val) {
      this.currentPage = val;
      this.getInviteList(this.invitationCode);
    },
    /* resetPassword (row) {
      this.$confirm(`确认要重置用户 ${row.username}(${row.mobile}) 密码为 123456 吗? 此操作无法撤销!`, '警告', { type: 'warning', customClass: 'reset-pw-dialog' })
        .then(async _ => {
          const { code } = await this.$API.resetPassword({
            mobile: row.mobile,
            password: '123456',
          });

          if (code === 200) {
            this.$message.success('重置成功!');
            this.getList();
          }
        });
    }, */
  }
};
</script>

<style lang="less" scoped>
.el-popover {
  padding: 6px;
}
.editArea {
  padding: 3px;
  cursor: pointer;
  &:hover {
    margin: -1px;
    border: 1px dashed #666;
  }
}
.container {
  position: relative;
}
.reset-password {
  color: #e27470;
}
.reset-pw-dialog {
  width: 200px;
}
</style>
